<template>
		<view>
			<view style="height:100%;padding-top:30rpx;">

				<view class="recharge">
					<view class="rechtitle">提现金额</view>
					<view  class="rechargeMoney" >
						<view style="font-size: 56rpx;">￥</view>
						<input  class="uni-input" v-model="money" type="number" placeholder="请输入提现金额">
					</view>  
					 <view class="rechar-num">
							<view class="num-txt">当前可提现￥{{moneyNum}}元</view>
							<view class="all-rechar" @click="allNomey">全部提现</view>
					 </view>
					 <view class="reachar-info">提现申请需等待后台审核，预计1~3个工作日</view>
				</view>	
				
				<view class="type-money">
				<view class="choosetype">请选择提现方式</view>
				<view class="type-List">
						 <radio-group @change="radioChange">
								<label class="uni-list-cell" v-for="(item, index) in typeList" :key="item.value">			
									<view class="payfangshi">	<image class="pay-icon" :src="item.imgurl" mode=""></image> {{item.name}}</view>
									<view>
										<radio  color="#000" :value="item.value" :checked="index === current" style="transform:scale(0.8);"/>
									</view>
								</label>
					 </radio-group> 					
				</view>	
				</view>
				<view class="submit-btn" @click="handleApply">提交申请</view>
		</view>
	
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				moneyNum:99.00,
				current:0,
				typeList:[
					{value: 'WX',name: '微信',imgurl:'/static/image/Index/index-paywx.png',checked: 'true'},
					{value: 'ZFB',name: '支付宝',imgurl:'/static/image/Index/indexpayzfb.png'},
				],
			}
		},
		methods: {
		allNomey(){
			this.money = this.moneyNum
		},
		radioChange(evt){
				for (let i = 0; i < this.typeList.length; i++) {
					 if (this.typeList[i].value === evt.detail.value) {
							this.current = i;
							break;
					}
				}		
		},
		handleApply(){
			this.$helper.to('/pages/views/myWallet/drawalApply')
		},
		
		}
	}
</script>

<style lang="scss" scoped>
	.recharge{
		width: 690rpx;
		height: 312rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:0 auto;
	}
	.rechtitle{
		font-size:30rpx;
		margin-left:30rpx;
		padding-top: 40rpx;
		
	}
	.rechargeMoney{
		display: flex;
		align-items: center;
		margin-top:30rpx;
		margin-left:30rpx;
	}
	.rechar-num{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:0 30rpx ;
		margin-top:30rpx;
	}
	.num-txt{
		font-size: 24rpx;
		color: #666666;
	}
	.all-rechar{	
		font-size: 28rpx;
		color: #FF0000;
	}
	.reachar-info{
	  margin-left:30rpx;
		font-size: 22rpx;
		color: #999999;
		margin-top:14rpx;
	}
	.type-money{
		width: 750rpx;
		height: 262rpx;
		background: #FFFFFF;
				margin-top:30rpx;
	}
	.choosetype{
		margin-left:30rpx;
		padding-top:30rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;		
	}
	
	.type-List{
		margin: 30rpx;
	}
	.uni-list-cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:30rpx;
	}
	.payfangshi{
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
	.uni-input{
		border-bottom:1px solid #ccc;	
		font-size:40rpx;
		padding-left:18rpx;
	}
	.pay-icon{
		width:50rpx;
		height:50rpx;
		margin-right:24rpx;
	}
	.submit-btn{
		width:690rpx;
		height:90rpx;
		border-radius: 49rpx;
		background: #000;
		line-height: 90rpx;
		text-align: center;
		color:#FEC92F;
		font-size: 32rpx;
		margin:0 auto;
		margin-top:500rpx;
	}
</style>